<template>
  <canvas ref="code" height="40" width="80"/>
</template>

<script>
export default {
  name: "VerifyCode",
  props: {
    code: {
      required: true,
      type: String
    }
  },
  methods: {
    fill(code) {
      let canvas = this.$refs.code;
      let ctx = canvas.getContext('2d');
      ctx.fillStyle = "#FFFFFF";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "#000000";
      ctx.font = "30px serif";
      ctx.textAlign = "center"
      ctx.fillText(code, 40, 30);
    }
  },
  watch: {
    code(n) {
      this.fill(n)
    }
  },
  mounted() {
    this.fill(this.code)
  }
}
</script>

<style scoped>

</style>